<!-- 面试技巧 -->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索栏 -->
        <el-row type="flex">
          <el-col>
            <el-form :inline="true" ref="articleForm">
              <el-form-item label="关键字">
                <el-input
                  v-model="queryPage.keyword"
                  size="small"
                  placeholder="根据文章标题搜索"
                ></el-input>
              </el-form-item>

              <el-form-item label="状态" style="margin-left: 40px">
                <el-select
                  size="small"
                  v-model="queryPage.state"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="clearCLick">清除</el-button>
                <el-button size="small" type="primary" @click="searchClick"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 新增按钮 -->
          <el-col :span="1.5">
            <el-button
              icon="el-icon-edit"
              size="small"
              type="success"
              @click="addArticleClick"
              >新增技巧</el-button
            >
          </el-col>
        </el-row>

        <!-- 提示信息 -->
        <el-row>
          <el-col>
            <el-alert
              class="alert"
              :closable="false"
              :title="`数据一共有${total}条`"
              type="info"
              show-icon
            >
            </el-alert>
          </el-col>
        </el-row>

        <!-- 表格部分 -->
        <el-table :data="articleList">
          <el-table-column
            type="index"
            width="80"
            label="序号"
          ></el-table-column>
          <el-table-column prop="title" width="400" label="文章标题">
            <template #default="{ row }">
              <span>{{ row.title }}</span>
              <a v-if="row.videoURL" href="#" class="el-icon-film"  @click="onVideo">

              </a>
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数"></el-table-column>
          <el-table-column prop="username" label="录入人"></el-table-column>

          <el-table-column label="录入时间">
            <template #default="{ row }">
              <span> {{ formmatData(row.createTime) }} </span>
            </template>
          </el-table-column>

          <el-table-column prop="state" width="100" label="状态">
            <template #default="{ row }">
              <span v-if="row.state === 1"> 已开启 </span>
              <span v-else-if="row.state === 0"> 已禁用 </span>
            </template>
          </el-table-column>
          <el-table-column width="180" label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="previewClick(row.id)"
                >预览</el-button
              >
              <el-button type="text" @click="statusClick(row.id, row.state)">
                {{ row.state === 1 ? "禁用" : row.state === 0 ? "开启" : "无" }}
              </el-button>
              <!-- <el-button
                type="text"
                v-if="row.state === 1"
                @click="colesClick(row.state)"
              >禁用</el-button>
              <el-button type="text" v-else-if="row.state === 0">开启</el-button> -->
              <el-button
                type="text"
                :disabled="!!row.state"
                @click="updateArtClick(row.id)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="!!row.state"
                @click="delClick(row.id)"
                slot="reference"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-row type="flex" justify="end" style="margin-top: 20px">
          <el-pagination
            background
            layout="prev, pager, next, sizes, jumper"
            :current-page="queryPage.page"
            :page-size="queryPage.pagesize"
            :total="total"
            :page-sizes="[5, 10, 20, 30]"
            @current-change="articlePage"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 新增组件 -->
    <articles-add
      ref="update"
      :showAddDialog="showAddDialog"
      @closeAddDialog="closeAddDialogFn"
      @updateAddAticle="getArticleList"
      :updateId="updateId"
    />
    <!-- 预览组件 -->
    <question-preview
      ref="preview"
      :showQueDiolog.sync="showPreviewDialog"
      :previewId="previewId"
    ></question-preview>

    <!-- 视频预览弹窗 -->
      <el-dialog
        @close="closeNei"
        width="750px"
        title="视频预览"
        :visible.sync="innerVisible"
        append-to-body
        modal
        center
      >
        <!-- 解决外部视频链接返回403错误 -->
        <meta name="referrer" content="no-referrer" />

        <div class="contentCenter">
          <video
            width="700"
            :src="videoURL"
            controls="controls"
            v-if="video"
          ></video>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import ArticlesAdd from '@/module-hmmm/components/articles-add.vue'
import questionPreview from '@/module-hmmm/components/questions-preview.vue'
// 格式化时间的包
import dayjs from 'dayjs'
import { status } from '@/api/hmmm/constants'
import { list, remove, changeState } from '@/api/hmmm/articles'
export default {
  components: {
    ArticlesAdd,
    questionPreview
  },
  data () {
    return {
      queryPage: {
        page: 1, // 当前页
        pagesize: 10, // 每页展示几条数据
        keyword: '', // 关键字
        state: null // 状态
      },
      articleList: [], // 文章列表
      total: null, // 总共多少条数据
      showAddDialog: false, // 控制新增文章的显示和隐藏
      showPreviewDialog: false,
      previewId: null, // 预览文章的id
      updateId: null, // 修改文章的id
      // 预览视频弹窗
      video: false,
      innerVisible: false,
      videoURL: ''
    }
  },
  created () {
    // 调用获取文章列表
    this.getArticleList()
  },

  computed: {
    // 文章的状态：下拉框
    status () {
      return status // 数组：标题下拉的启用与禁用
    }
  },

  methods: {
    // 点击了修改按钮
    updateArtClick (id) {
      // 获取修改文章id
      this.updateId = id
      this.showAddDialog = true
      // 调用子组件的回显文章详情方法
      this.$nextTick(() => {
        this.$refs.update.getUpdateArti()
      })
    },

    // 点击了预览按钮
    previewClick (id) {
      this.previewId = id
      // 显示预览弹层
      this.showPreviewDialog = true
      // 调用子组件的预览方法
      // 注意：
      this.$nextTick(() => {
        this.$refs.preview.getPreviewList()
      })
    },

    // 切换开启和禁用功能：让 修改 和 删除功能 是否禁用
    async statusClick (id, state) {
      const query = {
        id: id,
        // 因为返回值是 success: true, 因为状态是数值类型的，所以需要做转换
        state: Number(!state)
      }
      await changeState(query)
      console.log('切换操作状态', state)
      // 重新刷新文章列表
      this.getArticleList()
    },

    // 删除功能
    delClick (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 调用删除的接口
          await remove({ id })
          // 重新刷新页面
          this.getArticleList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭弹层
    closeAddDialogFn (val) {
      // 接收子组件传过来的值，关闭弹层
      this.showAddDialog = val
      // 因为要区分 新增和修改 的标题，所以关闭弹层的时候，把updateId清除
      this.updateId = null
    },

    // 点击了添加按钮
    addArticleClick () {
      // 显示弹层
      this.showAddDialog = true
    },

    // 点击了清除按钮
    clearCLick () {
      this.$nextTick(() => {
        // 只需要把对应的数据 赋值为空即可
        this.queryPage.keyword = ''
        this.queryPage.state = null
        // 不管在第几页，先跳到第一页
        this.queryPage.page = 1
        // 清除了数据之后，重新查新页面
        this.getArticleList()
        // this.$refs.articleForm.resetFields() 此方法行不通
      })
    },

    // 点了搜索按钮：搜索功能（节约性能：加上防抖）
    searchClick () {
      // 方式1：可以全局定义一个timer
      // 方式2：提示：this.timer 仅仅是使用js基础语法给 Vue组件实例动态设置属性而已
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // 给input添加双向绑定
        console.log(this.queryPage.keyword)
        // 不管在第几页，先跳到第一页
        this.queryPage.page = 1
        // 查询文章（调用获取文章列表）
        this.getArticleList()
      }, 500)
    },

    // 格式化时间
    formmatData (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },

    // 每页显示的条数
    handleSizeChange (val) {
      // console.log(`显示${val}`)
      // bug: 需要先跳转到第一页，然后在显示数据
      this.queryPage.page = 1
      // 把val赋值给每页的条数，控制每页显示多少条数据
      this.queryPage.pagesize = val
      // 重新获取文章列表
      this.getArticleList()
    },

    // 分页器-切换分页功能
    articlePage (currentPage) {
      // 把currentPage给当前页赋值
      this.queryPage.page = currentPage
      // 重新获取文章列表
      this.getArticleList()
    },

    // 获取文章列表的方法
    async getArticleList () {
      // 调用获取文章列表的接口
      const { data } = await list(this.queryPage)
      console.log('文章列表', data)
      // 文章列表
      this.articleList = data.items
      // 文章的总条数
      this.total = data.counts
    },
    // 点击视频播放
    // 视频点击事件
    closeNei () {
      this.video = !this.video
    },
    onVideo (row) {
      this.videoURL = row.videoURL
      this.video = !this.video
      this.innerVisible = true
      console.log(row.videoURL)
    }
  }
}
</script>

<style scoped>
.alert {
  margin-bottom: 15px;
}
.el-icon-film {
  margin-left: 3px;
  color: #00f;
  font-size: 18px;
}
</style>
